<template>
  <div>
    <div v-if="state.dataSource?.length == 0">
      <MyTemp>暂无阀门确认记录哦~</MyTemp>
    </div>

    <div v-else class="ht-search-form" style="margin-top: 6px">
      <p class="ht-form-title">阀门开关明细</p>

      <ht-table
        class="ht-table-no-border"
        :data="state.dataSource"
        style="width: 100%; margin-top: 12px"
        border
        pageStyle="text-align:right"
        :hide-page="true"
        highlight-current-row
        :columns="columns"
      >
        <template slot="status" slot-scope="{ row }">
          <!-- 1为开启状态， -->

          {{ row.status == 0 ? '关闭' : '开启' }}
        </template>
        <template slot="valveStatus" slot-scope="{ row }">
          <!-- 1为开启状态， -->
          {{ row.valveStatus == 1 ? '开启' : '关闭' }}
        </template>

        <template slot="creatorId" slot-scope="{ row }">
          <ht-select-user v-model="row.creatorId" :readonly="true">
          </ht-select-user>
        </template>

        <template slot="creationTime" slot-scope="{ row }">
          {{ row.creationTime?.replace('T', ' ').slice(0, 19) }}
        </template>
      </ht-table>
    </div>
  </div>
</template>
<script lang="ts">
import { Column } from 'htui-yllkbz/src/packages/type';
import MyTemp from './myTemp.vue';
import { Component, Prop, Vue } from 'vue-property-decorator';
interface State {
  /** 数据状态 */
  loading: boolean;
  dataSource: any;
}

@Component({
  components: {
    MyTemp,
  },
})
export default class Index extends Vue {
  @Prop() scanRecords!: any;
  /** 数据 */
  state: State = {
    loading: false,
    dataSource: [],
  };
  /** 生命周期 */
  initData() {
    this.state.dataSource = this.scanRecords;
  }

  /** 方法 */
  /** 监听 */
  /** 计算属性 */
  get columns(): Column[] {
    return [
      { key: 'sapName', title: '设备名称' },
      { key: 'sapCode', title: '设备编号' },
      //
      { key: 'status', title: '变更前状态' },

      { key: 'valveStatus', title: '变更后状态' },
      { key: 'creatorId', title: '经手人' },
      //
      { key: 'creationTime', title: '变更时间' },
    ];
  }
  /** 计算属性 */
}
</script>
<style lang="scss" scoped></style>
